<template>
  <div class="header">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input
          v-model="orderNo"
          placeholder="请输入订单编号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="选择日期" required>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="shuju" border style="width: 1100px">
      <el-table-column fixed type="index" label="序号" width="50px">
      </el-table-column>
      <el-table-column
        prop="orderNo"
        label="订单编号"
        show-overflow-tooltip
        width="150px"
      >
      </el-table-column>
      <el-table-column prop="skuName" label="商品名称" width="150px">
      </el-table-column>
      <el-table-column prop="price" label="订单金额" width="150px">
      </el-table-column>
      <el-table-column prop="innerCode" label="设备编号" width="150px">
      </el-table-column>
      <el-table-column prop="" label="订单状态" width="150px"
        >出货成功
      </el-table-column>
      <el-table-column prop="createTime" label="订单日期" width="170px">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100px">
        <template #default="scope">
          <el-button type="text" @click="handleChaKan(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="订单详情" :visible.sync="dialogVisible">
      <el-descriptions title="出货成功">
        <el-descriptions-item label="订单编号">{{
          this.xiangqing.orderNo
        }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{
          this.xiangqing.skuName
        }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{
          this.xiangqing.price
        }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{
          this.xiangqing.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          this.xiangqing.updateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{
          this.xiangqing.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">微信支付</el-descriptions-item>
        <el-descriptions-item label="设备地址">{{
          this.xiangqing.addr
        }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div class="block">
      <el-pagination
        :data="shuju"
        :total="+totalCount"
        @current-change="handleCurrentChange"
        layout="total,prev, pager, next"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getOlder } from '@/api/older'
export default {
  name: 'dashboard-page',
  data() {
    return {
      value1: '',
      dialogVisible: false,
      formInline: {},
      orderNo: '',
      pageIndex: '',
      pageSize: '',
      totalCount: '',
      totalPage: '',
      shuju: [],
      xiangqing: []
    }
  },
  methods: {
    handleChaKan(scope) {
      this.dialogVisible = true
      // console.log(scope)
      this.xiangqing = scope
      console.log(this.xiangqing)
    },
    // dingdanChange() {
    //   this.dialogVisible = true
    // },
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then((_) => {
    //       done()
    //     })
    //     .catch((_) => {})
    // },
    async onSubmit() {
      console.log(this.orderNo)
      const res3 = await getOlder(this.pageIndex, this.pageSize, this.orderNo)
      this.shuju = res3.currentPageRecords
      this.totalCount = this.shuju.length
      console.log(res3.currentPageRecords)
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageIndex = `${val}`
      console.log(this.pageIndex)
      const res2 = await getOlder(this.pageIndex, this.pageSize)
      // console.log(res)
      this.shuju = res2.currentPageRecords
      this.pageIndex = ''
      // console.log(this.shuju)
    }
  },
  async created() {
    const res = await getOlder(this.pageIndex, this.pageSize)
    // console.log(res)
    this.totalCount = res.totalCount
    this.totalPage = res.totalPage
    this.shuju = res.currentPageRecords
    console.log(this.totalCount)
  }
}
</script>

<style scoped lang="scss">
.el-table {
  margin: 20px 0;
}
.header {
  margin: 20px 0;
}
</style>
